<template>
  <el-dialog
    title="物流信息"
    width="30%"
    top="10vh"
    center
    :visible.sync="visible"
    @close="visible = !visible"
  >
    <div v-loading="loading">
      <div>
        <p>快递公司：{{ expressInfo && expressInfo.companyName }}</p>
        <p class="mt-10">快递单号：{{ expressInfo && expressInfo.expressNo }}</p>
      </div>
      <div>
        <div class="flex items-center justify-between">
          <div class="mt-10">
            <span>包裹{{ expressNum }}:</span>
            <span>共计{{ goodsNum }}件商品</span>
          </div>
          <div v-show="goodsNum">
            <el-button v-show="showPrevious" type="text" @click="viewPrevHandle"
              >查看上一个包裹</el-button
            >
            <el-button v-show="showNext" type="text" @click="viewNextHandle"
              >查看下一个包裹</el-button
            >
            <i v-show="showPrevious && showNext" class="el-icon-caret-right"></i>
          </div>
        </div>
        <el-divider />
        <div v-for="(ele, index) in expressInfo && expressInfo.fastDataVoList" :key="index">
          <p>{{ ele.context }}</p>
          <p class="mt-10">{{ ele.time }}</p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'OrderBatchPopup',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    orderNo: String,
    expressType: Number,
    expressIdList: Array,
    detailList: Array
  },
  data() {
    return {
      expressId: '', // 快递单号id
      supplyId: '', // 供应链id
      goodsSkuId: '', // 商品skuId
      expressInfo: null,
      currentIndex: 0,
      loading: false
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    },
    // 商品类型 1手动发货: this.expressIdList 2自动发货: this.detailList
    goodsType() {
      return this.expressType === 1 ? 'expressIdList' : 'detailList'
    },
    // 商品数量
    goodsNum() {
      // return this[this.goodsType]?.length
      return this.expressInfo?.expressNum
    },
    // 包裹序号
    expressNum() {
      return this.currentIndex + 1
    },
    // 显示上一个包裹
    showPrevious() {
      return this.currentIndex > 0
    },
    // 显示下一个包裹
    showNext() {
      return this.currentIndex < this.expressIdList.length - 1
    }
  },
  created() {
    this.getExpressInfo()
    this.getOtherExpressInfo()
  },
  methods: {
    // 获取自营商品物流信息 expressType: 1 手动发货 2: 自动发货
    async getExpressInfo() {
      if (this.expressType === 2) return
      // 默认查看第一个包裹
      this.loading = true
      let expressId = this.expressId || this.expressIdList[this.currentIndex]
      const { data } = await this.$http.order.orderApi.getExpressInfo(expressId)
      this.expressInfo = data
      this.loading = false
    },

    // 获取第三方商品物流信息 expressType: 1 手动发货 2: 自动发货
    async getOtherExpressInfo() {
      if (this.expressType === 1) return
      // 默认查看第一个包裹
      this.loading = true
      let goodsSkuId = this.goodsSkuId || this.detailList[this.currentIndex]?.goodsSkuId
      let supplyId = this.supplyId || this.detailList[this.currentIndex].supplyId
      const { data } = await this.$http.order.orderApi.getOtherExpressInfo({
        supplyId,
        sku: goodsSkuId,
        orderSn: this.orderNo
      })
      this.expressInfo = data
      if (!data.fastDataVoList?.length) {
        console.log(1)
        this.$set(this.expressInfo, 'fastDataVoList', [
          { context: '未查询到物流信息, 请稍后再试', time: null }
        ])
      }
      this.loading = false
    },

    // 根据发货类型expressType: 1 手动发货 2: 自动发货 查包裹
    getExpressBackage() {
      if (this.expressType === 1) {
        this.expressId = this[this.goodsType][this.currentIndex]
        this.getExpressInfo()
      } else {
        this.goodsSkuId = this.detailList[this.currentIndex].goodsSkuId
        this.supplyId = this.detailList[this.currentIndex].supplyId
        this.getOtherExpressInfo()
      }
    },

    // 查看下一个包裹
    viewNextHandle() {
      if (this.currentIndex === this[this.goodsType].length - 1)
        return this.$message.error('没有下一个包裹了！')
      this.currentIndex += 1
      this.getExpressBackage()
    },

    // 查看上一个包裹
    viewPrevHandle() {
      if (this.currentIndex === 0) return this.$message.error('没有上一个包裹了！')
      this.currentIndex -= 1
      this.getExpressBackage()
    }
  }
}
</script>
